<template>
  <div>
    <div class="mycollection_box">
      <div class="mycollection_head">
        <span class="iconfont icon-jiantou-left" @click="$router.go(-1)"></span>
        <p>我的收藏</p>
      </div>
      <div class="mycollection" v-if="lists">
        <div
          class="box"
          v-for="(item, index) in lists"
          :key="item.goods_id"
          @click="goShopp(index)"
        >
          <div class="left">
            <img :src="item.goods_img" />
          </div>
          <div class="right">
            <p>{{ item.goods_test }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      lists: [], //收藏数组
    };
  },
  created() {
    //判断是否登录
    let token = sessionStorage.getItem("token");
    if (!token) {
      this.$router.push("login");
    }

    this.lists = JSON.parse(sessionStorage.getItem("collection"));
  },
  methods: {
    //点击进入详情页面
    goShopp(index) {
      let id = this.lists[index].goods_id;
      this.$router.push('/shopping/details?id='+id);
    },
  },
};
</script>

<style lang="less">
.mycollection_box {
  .mycollection_head {
    padding: 10px 18px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    span {
      font-weight: bold;
    }
    p {
      display: inline-block;
      padding-left: 33.6%;
    }
  }
  .mycollection {
    padding: 10px 20px;
    background-color: #fff;
    .box {
      display: flex;
      border-bottom: 1px solid #f4f4f4;
      align-items: center;
      .left {
        width: 80px;
        height: 80px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
        }
      }
      .right {
        font-size: 12px;
        padding-left: 10px;
        p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
}
</style>